<%@ page import="java.util.Base64" %><%--
  Created by IntelliJ IDEA.
  User: kwc13
  Date: 2022/6/8
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>小米商城</title>
    <link href="/Web_css/Front_page.css" rel="stylesheet" type="text/css"/>
    <script src="/Web_page/JQuery.min.js"></script>
    <script src="/Web_js/Front_page.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>
<jsp:include page="page_Header.jsp" flush="true" ></jsp:include>
<jsp:include page="introduce.jsp" flush="true" ></jsp:include>
            <!-- 网页主体 -->
            <div class="body" style="height: 670px;">
                <!-- 主体轮播 头部 -->
                <div class="topic_Header">
                    <div class="all_Categories">
                        <ul>
                            <a href="#"><li onmouseover="show(0)" onmouseout="hide(0)">&emsp;手机</li></a>
                            <a href="#"><li onmouseover="show(1)" onmouseout="hide(1)">&emsp;电视</li></a>
                            <a href="#"><li onmouseover="show(2)" onmouseout="hide(2)">&emsp;笔记本&nbsp;平板</li></a>
                            <a href="#"><li onmouseover="show(3)" onmouseout="hide(3)">&emsp;出行&nbsp;穿戴</li></a>
                            <a href="#"><li onmouseover="show(4)" onmouseout="hide(4)">&emsp;耳机&nbsp;音响</li></a>
                            <a href="#"><li onmouseover="show(5)" onmouseout="hide(5)">&emsp;家电</li></a>
                            <a href="#"><li onmouseover="show(6)" onmouseout="hide(6)">&emsp;智能&nbsp;路由器</li></a>
                            <a href="#"><li onmouseover="show(7)" onmouseout="hide(7)">&emsp;电源&nbsp;配件</li></a>
                            <a href="#"><li onmouseover="show(8)" onmouseout="hide(8)">&emsp;健康&nbsp;儿童</li></a>
                            <a href="#"><li onmouseover="show(9)" onmouseout="hide(9)">&emsp;生活&nbsp;箱包</li></a>
                        </ul>
                    </div>
                    <!-- 隐藏部分 自定义标签 手机 -->
                    <c:forEach var="i" end="10" begin="1">
                        <toggle class="toggle" onmouseover="background_Continued_S(this)" onmouseout="background_Continued_H(this)">
                            <div class="various">
                                <c:forEach var="j" end="3" begin="1">
                                    <ul>
                                        <li><a href="#"><img src="/Web_img/Xiaomi_cell_phone1.png" class="introduction_Img${i}" state="false"><span class="introduction_Name${i}">Note 11T pro+</span></a></li>
                                        <li><a href="#"><img src="/Web_img/Xiaomi_cell_phone1.png" class="introduction_Img${i}" state="false"><span class="introduction_Name${i}">Note 11T pro+</span></a></li>
                                    </ul>
                                </c:forEach>
                            </div>
                        </toggle>
                    </c:forEach>
                    <script>
                        for (let i = 1; i < bars.length+1; i++) {
                            if (bars[i] != undefined) {
                                var data = bars[i].split(",");
                                if (data[9] == "手机"){
                                    titles = 1 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if(data[9] == "电视"){
                                    titles = 2 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if(data[9] == "笔记本" || data[9] == "平板"){
                                    titles = 3 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if (data[9] == "运动出行"){
                                    titles = 4 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if (data[9] == "穿戴"){
                                    titles = 5 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if (data[9] == "家电"){
                                    titles = 6 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if (data[9] == "路由器"){
                                    titles = 7 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if(data[9] == "智能家居" || data[9] == "厨房电器"){
                                    titles = 8 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }else if (data[9] == "日用百货"){
                                    titles = 9 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                } else if (data[9] == "生活电器"){
                                    titles = 10 ;
                                    var introduction_Img = document.getElementsByClassName("introduction_Img"+titles)
                                    var introduction_Name = document.getElementsByClassName("introduction_Name"+titles)
                                    for (let i = 0; i < introduction_Img.length; i++) {
                                        if (introduction_Img[i].getAttribute("state") == "false"){
                                            introduction_Img[i].src = data[4];
                                            introduction_Name[i].innerText = data[1]
                                            introduction_Img[i].setAttribute("state","true")
                                            break
                                        }
                                    }
                                }
                            }
                        }
                    </script>
                    <!-- 隐藏部分 自定义标签-->
                    <!-- 轮播图 -->
                        <a class="control img_Left" onmouseout="img_Src_000(this,'left')" onmouseover="img_Src_fff(this,'left')" onclick="Operation_Left()"><img src="/Web_img/carousel_left_%23000.png"></a>
                        <div class="carousel">
                            <a href=""><img src="/Web_img/carousel_img1.webp" class="carousel_img"></a>
                        </div>
                        <a class="control img_Right" onmouseout="img_Src_000(this,'right')" onmouseover="img_Src_fff(this,'right')" onclick="Operation_Right()"><img src="/Web_img/carousel_right_%23000.png"></a>

                        <div class="choose">
                            <ul>
                                <a class="fixed" onclick="choose(1)"><li></li></a>
                                <a class="fixed" onclick="choose(2)"><li></li></a>
                                <a class="fixed" onclick="choose(3)"><li></li></a>
                            </ul>
                        </div>
                    <script>
                        //轮播图
                        function choose(index) {
                            if (index == 1){
                                carousel_img[0].src = "/Web_img/carousel_img1.webp";
                            }else if (index == 2){
                                carousel_img[0].src = "/Web_img/carousel_img2.webp";
                            }else if (index == 3){
                                carousel_img[0].src = "/Web_img/carousel_img3.webp";
                            }
                        };
                    </script>
                    </div>
                    <!-- 轮播图 -->
                <div class="carousel_Bottom">
                    <!-- 其他功能选项 -->
                    <div class="other">
                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img1.png">
                                </div>
                                <span>保障服务</span>
                            </a>
                        </div>

                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img2.png">
                                </div>
                                <span>企业团购</span>
                            </a>

                        </div>

                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img3.png">
                                </div>
                                <span>F码通道</span>
                            </a>

                        </div>

                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img4.png">
                                </div>
                                <span>米粉卡</span>
                            </a>

                        </div>

                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img5.png">
                                </div>
                                <span>以旧换新</span>
                            </a>

                        </div>

                        <div class="function">
                            <a class="scope" href="#">
                                <div class="function_Img">
                                    <img src="/Web_img/front_page_img6.png">
                                </div>
                                <span>话费充值</span>
                            </a>

                        </div>

                    </div>
                    <div class="new_Listed">
                        <a href="#">
                            <div class="new_Img">
                                <img src="/Web_img/front_page_img7.png">
                            </div>
                        </a>
                    </div>
                    <div class="new_Listed">
                        <a href="#">
                            <div class="new_Img">
                                <img src="/Web_img/front_page_img8.png">
                            </div>
                        </a>
                    </div>
                    <div class="new_Listed">
                        <a href="#">
                            <div class="new_Img">
                                <img src="/Web_img/front_page_img9.png">
                            </div>
                        </a>
                    </div>
                </div>
                    <!-- 其他功能选项 -->
                </div>


            <!-- 手机 -->
            <div class="body_Commodity">
                <div class="head_Img">
                    <img src="/Web_img/front_page_img10.png">
                </div>
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>手机</span><a href="#">查看更多</a>
                    </div>
                </div>
                <div class="commodity">
                    <a href="#">
                        <div class="publicity_img">
                            <img src="/Web_img/front_page_img11.webp">
                        </div>
                    </a>
                    <div class="produc">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="4" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id1"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img1" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name1">Redmi Not 11T Pro+</a><br>
                                                <span class="introduce_Text1">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price1">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 智能穿戴 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>智能穿戴</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(1)" class="control_switch">热门</a>
                        <a style="color: #FF6700;" onmouseover="product_switch(2)" class="control_switch">穿戴</a>
                    </div>
                </div>
                <div class="commodity">
                    <a href="#">
                        <div class="publicity_img">
                            <img src="/Web_img/front_page_img12.webp">
                        </div>
                    </a>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id2"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img2" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name2">Redmi Not 11T Pro+</a><br>
                                                <span class="introduce_Text2">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price2">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id2"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img2" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name2">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text2">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price2">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 笔记本平板 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>笔记本/平板</span>
                        <a style="color: #FF6700" class="control_switch">热门</a>
                    </div>
                </div>
                <div class="commodity">
                    <a href="#">
                        <div class="publicity_img">
                            <img src="/Web_img/front_page_img13.webp">
                        </div>
                    </a>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="4" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id3"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img3" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name3">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text3">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price3">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 家电 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>家电</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(3)" class="control_switch">电视影视</a>
                        <a style="color: #FF6700;" onmouseover="product_switch(4)" class="control_switch">热门</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img14.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img15.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id4"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img4" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name4">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text4">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price4">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id5"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img5" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name5">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text5">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price5">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 生活电器 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>生活电器</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(5)" class="control_switch">扫地机</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(6)" class="control_switch">空净</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(7)" class="control_switch">清洁</a>
                        <a style="color: #FF6700" onmouseover="product_switch(8)" class="control_switch">风扇</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img16.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img17.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id6"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img6" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name6">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text6">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price6">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id7"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img7" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name7">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text7">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price7">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id8"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img8" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name8">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text8">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price8">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>


                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id9"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img9" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name9">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text9">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price9">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <div class="head_Img">
                    <img src="/Web_img/front_page_img18.webp">
                </div>


                <!-- 生活电器 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>厨房电器</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(9)" class="control_switch">净水器</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(10)" class="control_switch">烟灶</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(11)" class="control_switch">电饭煲</a>
                        <a style="color: #FF6700" onmouseover="product_switch(12)" class="control_switch">蒸烤箱</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img19.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img20.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id10"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img10" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name10">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text10">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price10">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id11"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img11" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name11">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text11">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price11">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id12"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img12" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name12">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text12">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price12">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>


                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id13"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img13" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name13">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text13">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price13">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 智能家具 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>智能家具</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(13)" class="control_switch">智能设备</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(14)" class="control_switch">路由器</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(15)" class="control_switch">门锁</a>
                        <a style="color: #FF6700" onmouseover="product_switch(16)" class="control_switch">小爱音响</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img21.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img22.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id14"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img14" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name14">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text14">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price14">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id15"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img15" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name15">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text15">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price15">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id16"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img16" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name16">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text16">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price16">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>


                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="3" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id17"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img17" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name17">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text17">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price17">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>

                <!-- 智能家具 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>运动出行</span>
                        <a style="margin-left: 25px;" onmouseover="product_switch(17)" class="control_switch">出行工具</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(18)" class="control_switch">箱包配饰</a>
                        <a style="margin-left: 25px;" onmouseover="product_switch(19)" class="control_switch">运动健身</a>
                        <a style="color: #FF6700" onmouseover="product_switch(20)" class="control_switch">平衡车/滑板车</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img23.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img24.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id18"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img18" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name18">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text18">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price18">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="2" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id19"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img19" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name19">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text19">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price19">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>

                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id20"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img20" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name20">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text20">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price20">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>


                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: none">
                        <c:forEach var="j" end="1" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="1" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id21"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img21" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name21">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text21">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price21">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>


                <div class="head_Img">
                    <img src="/Web_img/front_page_img25.webp">
                </div>
                <!-- 日用百货 -->
                <div class="category_Commodity">
                    <div class="carousel_name">
                        <span>日用百货</span>
                        <a style="margin-left: 25px;" class="control_switch">推荐</a>
                    </div>
                </div>
                <div class="commodity">
                    <div class="exhibits">
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img26.webp">
                            </div>
                        </a>
                        <a href="#">
                            <div class="publicity_imgs">
                                <img src="/Web_img/front_page_img27.webp">
                            </div>
                        </a>
                    </div>
                    <!-- 隐藏部分 -->
                    <div class="produc" style="display: block">
                        <c:forEach var="j" end="2" begin="1">
                            <div class="produc_row" style="<c:if test="${j == 2}">margin-top: 15px;</c:if>">
                                <c:forEach var="i" end="4" begin="1">
                                    <a href="#">
                                        <div class="produc_Information">
                                            <a class="id id22"></a>
                                            <div class="produc_img">
                                                <img src="/Web_img/Xiaomi_cell_phone1.png" class="produc_Img22" state="false">
                                            </div>
                                            <div class="produc_name">
                                                <a class="produc_name22">Redmi21 11T Pro+</a><br>
                                                <span class="introduce_Text22">天玑8100 | 真旗舰芯</span>
                                            </div>
                                            <div class="produc_Price">
                                                <span><a class="produc_Price22">1999</a><span>元起</span></span>
                                            </div>
                                        </div>
                                    </a>
                                </c:forEach>
                            </div>
                        </c:forEach>
                    </div>
                </div>
            </div>
<script>
    var reg = RegExp(/扇/);
    var reg2 = RegExp(/吸尘/);
    var reg3 = RegExp(/净化/);
    var reg4 = RegExp(/扫拖机器/);
    var reg5 = RegExp(/烤/);
    var reg6 = RegExp(/电饭煲/);
    var reg7 = RegExp(/烟灶/);
    var reg8 = RegExp(/净水/);
    var reg9 = RegExp(/音箱/);
    var reg10 = RegExp(/锁/);
    var reg11 = RegExp(/音箱/);
    var reg12 = RegExp(/智能/);
    var reg13 = RegExp(/车/);
    var reg14 = RegExp(/体脂秤/);
    var reg15 = RegExp(/旅行箱/)
    var reg16 = RegExp(/记录仪/)
    var reg17 = RegExp(/牙/)
    for (let i = 1; i < bars.length+1; i++) {
        if (bars[i] != undefined) {
            var data = bars[i].split(",");
            if (data[9] == "手机") {
                titles = 1;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var id = document.getElementsByClassName("id"+titles)
                var original = document.getElementsByClassName("original"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (data[9] == "穿戴"){
                titles = 2;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (data[9] == "笔记本" || data[9] == "平板"){
                titles = 3;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (data[9] == "家电"){
                titles = 4;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if(data[9] == "电视"){
                titles = 5;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg.exec(data[1])){
                titles = 6;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg2.exec(data[1])) {
                titles = 7;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg3.exec(data[1])) {
                titles = 8;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg4.exec(data[1])) {
                titles = 9;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg5.exec(data[1])) {
                titles = 10;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg6.exec(data[1])) {
                titles = 11;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg7.exec(data[1])) {
                titles = 12;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg8.exec(data[1])) {
                titles = 13;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg9.exec(data[1])) {
                titles = 14;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        id[i].innerText = data[10]
                        produc_Price[i].innerText = data[3];
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (reg10.exec(data[1])) {
                titles = 15;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }else if (data[9] == "路由器") {
                titles = 16;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (reg12.exec(data[1])) {
                titles = 17;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (reg13.exec(data[1])) {
                titles = 18;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (reg14.exec(data[1])) {
                titles = 19;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (reg15.exec(data[1])) {
                titles = 20;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (reg16.exec(data[1])) {
                titles = 21;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10]
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
            if (data[9] == "日用百货") {
                titles = 22;
                var produc_Img = document.getElementsByClassName("produc_Img"+titles)
                var produc_name = document.getElementsByClassName("produc_name"+titles)
                var produc_Price = document.getElementsByClassName("produc_Price"+titles)
                var introduce_Text = document.getElementsByClassName("introduce_Text"+titles)
                var original = document.getElementsByClassName("original"+titles)
                var id = document.getElementsByClassName("id"+titles)
                for (let i = 0; i < produc_Img.length; i++) {
                    if (produc_Img[i].getAttribute("state") == "false"){
                        produc_Img[i].src = data[4];
                        produc_name[i].innerText = data[1];
                        introduce_Text[i].innerText = data[2];
                        produc_Price[i].innerText = data[3];
                        id[i].innerText = data[10];
                        produc_Img[i].setAttribute("state","true")
                        break
                    }
                }
            }
        }
    }
</script>

            <div class="other_Bottom">
                <div class="show_Advantage">
                    <ul>
                        <li><div class="show_Img"><img src="/Web_img/front_page_img28.webp"></div><span>预约维修服务</span></li>
                        <li><div class="other_fill"></div></li>
                        <li><div class="show_Img"><img src="/Web_img/front_page_img29.webp"><span>7天无理由退货</span></div></li>
                        <li><div class="other_fill"></div></li>
                        <li><div class="show_Img"><img src="/Web_img/front_page_img33.png"><span>15天免费换货</span></div></li>
                        <li><div class="other_fill"></div></li>
                        <li><div class="show_Img"><img src="/Web_img/front_page_img30.webp"><span>满69元包邮</span></div></li>
                        <li><div class="other_fill"></div></li>
                        <li><div class="show_Img"><img src="/Web_img/front_page_img31.webp"><span>520余家售后网点</span></div></li>
                    </ul>
                </div>

                <div class="other_Serve">
                    <div class="serve_Title">
                        <ul>
                            <li class="li_Tile">选购指南</li>
                            <li class="li_Tile">服务中心</li>
                            <li class="li_Tile">线下门店</li>
                            <li class="li_Tile">关于小米</li>
                            <li class="li_Tile">关注我们</li>
                        </ul>
                        <ul>
                            <li class="li_body"><span>手机</span></li>
                            <li class="li_body" style="margin-left: 20px;"><span>申请售后</span></li>
                            <li class="li_body"><span>小米之家</span></li>
                            <li class="li_body"><span>了解小米</span></li>
                            <li class="li_body"><span>新浪微博</span></li>
                        </ul>

                        <ul>
                            <li class="li_body"><span>电视</span></li>
                            <li class="li_body" style="margin-left: 20px;"><span>售后政策</span></li>
                            <li class="li_body"><span>服务网点</span></li>
                            <li class="li_body"><span>加入小米</span></li>
                            <li class="li_body"><span>官方微信</span></li>
                        </ul>

                    </div>
                    <div class="serve_fill">

                    </div>
                    <div class="service">
                        <div class="telephone">
                            <span>400-100-5678</span><br>
                            <a>8:00-18:00（仅收市话费）</a>
                        </div>
                        <div class="link_Service">
                            <a href="#">人工客服</a>
                        </div>
                        <div class="app">
                            <img src="/Web_img/xiaomi_logo.png"><span>下载小米商城app</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="other_Safety">
                <div class="other_logo">
                    <img src="/Web_img/xiaomi_logo.png">
                </div>
                <div class="other_Certification">
                    <div class="safety">
                        <ul>
                            <li><a href="#">小米商城</a> | <a href="#">MIUI</a> | <a href="#">米家</a> | <a href="#">米聊</a> | <a href="#">多看</a> | <a href="#">游戏</a> | <a href="#">政企服务</a> | <a href="#">小米天猫店</a> | <a href="#">小米集团隐私政策</a> | <a href="#">小米公司儿童信息保护规则</a> | <a href="#">小米商城隐私政策</a> | <a href="#">小米商城用户协议</a> | <a href="#">问题反馈</a> | <a href="#">Select Location</a></li>
                            <li><a href="#">北京互联网法院法律服务工作站</a> | <a href="#">中国消费者协会</a> | <a href="#">北京市消费者协会</a></li>
                        </ul>
                    </div>
                    <div class="certification">
                        © mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2020]0276-042号<br>
                        （京）网械平台备字（2018）第00005号 互联网药品信息服务资格证 (京)-非经营性-2014-0090 营业执照 医疗器械质量公告<br>
                        增值电信业务许可证 网络食品经营备案 京食药网食备202010048   食品经营许可证<br>
                        违法和不良信息举报电话：171-5104-4404 知识产权侵权投诉 本网站所列数据，除特殊说明，所有数据均出自我司实验室测试<br>
                    </div>
                    <div class="xiaomi_Slogan">
                        <img src="/Web_img/front_page_img32.webp" class="slogan_Img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var url = window.location.href;
    var reg = RegExp(/=/);
    if (reg.exec(url)){
        var split = url.split("=")
        var split2 = split[1].split(",");
        var mysqlname = document.getElementsByClassName("mysqlname")
        mysqlname[0].innerText = split2[0]
        var notification = document.getElementsByClassName("notification")
        notification[0].innerText = "我的订单"
        notification[0].href = "#"
        var information = document.getElementsByClassName("information")
        information[0].style.width = "250px"
        information[0].style.marginLeft = "-115px"
    }
</script>
</body>
</html>
